<template>
  <h2>child子组件</h2>
  <div style="text-align: center">
    <div>数量{{ count }}</div>
    <div>对象{{ obj }}</div>
    <div>计算属性{{ test }}</div>
  </div>
  <button @click="update">点击数量加一</button>
  <button @click="updateObJ">更改obj</button>

  <div>鼠标横纵坐标： {{x}}+{{y}}</div>
</template>

<script lang="ts">
import mousePagePosition from '@/ts/hook'
import {
  defineComponent,
  ref,
  reactive,
  watch,
  computed,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
export default defineComponent({
  name: "Child",
  setup() {
    // 测试hook
    const {x,y} = mousePagePosition()
    


    let count = ref(1);
    let obj = reactive({
      name: "laoli",
      age: 11,
      sex: "man",
    });
    function update() {
      count.value++;
    }
    function updateObJ() {
      // console.log(obj.value);
      obj.name = "laoliiiiii";
    }
    watch(
      obj,
      (val, val2) => {
        console.log(val, val2, obj);
      },
      {
        deep: true,
        // immediate: true
      }
    );
    let test = computed(() => {
      return obj.name + obj.age;
    });
    // 测试vue3声明周期
    console.log("-----setup-----");

    onBeforeMount(() => {
      console.log("-----onbeforeMount-----");
    });
    onMounted(() => {
      console.log("-----onMounted-----");
    });
    onBeforeUpdate(() => {
      console.log("-----onBeforeUpdate-----");
    });
    onUpdated(() => {
      console.log("-----onUpdated-----");
    });
    onBeforeUnmount(() => {
      console.log("-----onBeforeUnmount-----");
    });
    onUnmounted(() => {
      console.log("-----onUnmounted-----");
    });
    // 使用ref响应式需要将加了响应式的数据return出去以供模板使用 不仅是属性还有方法也需要进行return
    // 使用reactive 内部数据可以不用使用.value获取数据;但仅接受对象
    // 计算属性 computed  方法内部是箭头函数 return值 使用变量接收然后 在setup中return出去，模板中即可直接使用
    // watch 侦听器 监听器 监视 使用; watch方法，参数一：需要监听的值，参数二： 执行函数
    return {
      count,
      update,
      obj,
      updateObJ,
      test,
      x,
      y
    };
  },
});
</script>

<style>
</style>